
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/finance/fiancelist">佣金发放</router-link>><router-link to="/finance/myDistributork">核算佣金</router-link></div>
          <div class="hei10"></div>

        <div class="title">{{shop}}佣金核算</div>
				<div class="con" v-loading="loading">
          <div class="flex">
              <div class="flex2" style="flex: 5;">
               <div class="c1">
                  <div class="c2">数据起始时间</div>
                  <div class="c2" v-if="weijiesuan == ''">无</div>
                  <div class="c2" v-if="weijiesuan != ''">{{weijiesuan.created_at}}</div>
                </div>
                <div class="c1">
                  <div class="c2">待确认订单数量</div>
                  <div class="c2" v-if="weijiesuan == ''">无</div>
                  <div class="c2" v-if="weijiesuan != ''">{{weijiesuan.count}}</div>
                </div>
                <div class="c1">
                  <div class="c2">待确认金额</div>
                  <div class="c2" v-if="weijiesuan == ''">无</div>
                  <div class="c2" v-if="weijiesuan != ''">{{weijiesuan.sum_amount}}</div>
                </div>
<!--                <div class="c1">
                  <div class="c2">结算商品个数</div>
                  <div class="c2">{{weijiesuan.count}}</div>
                </div> -->
              </div>

              <div class="flex2" style="flex: 1;">
                <div class="c3"><el-button type="danger" @click="shengcheng" :disabled="weijiesuan == ''">生成支出确认表</el-button></div>
              </div>
          </div>
					<div class="list">
            <div class="th">发展人</div>
            <div class="th">客户经理</div>
            <div class="th" style="flex:2">确认周期</div>
            <div class="th">订单数量</div>
            <div class="th">结算金额</div>
            <div class="th">佣金发放确认</div>
						<div class="th">结算状态</div>
						<div class="th" style="flex:2">操作</div>
					</div>
					<div class="list" v-for="item in list" :key="item.id">
              <div class="td">{{item.shop_name}}</div>
              <div class="td">{{item.c_name}}</div>
              <div class="td" style="flex:2">
                    <div>开始：{{item.created_at}}</div>
                    <div>结束：{{item.user_filename}}</div>
              </div>
              <div class="td">{{item.count}}</div>
              <div class="td">{{item.sum_amount}}</div>
              <div class="td">{{item.status}}</div>
              <div class="td">{{item.status}}</div>
              <div class="td" style="flex:2">
              <!-- 商务点确认支出  财务点确认结算 -->
<!--              <el-button type="text" v-if="item.local_filename == '' && func_J02" @click="shengcheng(item.id,item.user_id)">生成确认表</el-button> -->
							<el-button type="text" v-if="item.local_filename != '' && func_J02" @click="down(item.local_filename)">下载确认表</el-button>
							<el-button type="text" v-if="func_J02 && item.status == 0" @click="fixstatus(1,item.tid)">等待确认</el-button>
              <el-button type="text" v-if="func_J01 && item.status == 1" @click="fixstatus(2,item.tid)">等待结算</el-button>
						</div>
					</div>

					<el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
				</div>
			</div>
		</div>
		<!-- <foot></foot> -->

	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name: 'myDistributork',
		data(){
			return{
				msg:"",
				id:"",

				loading:true,
				search:"",
				log:false,
				money:"",
				total:0,
				pagesize:20,
				page:1,
				list:"",
        shop_id:"",

        dialog:false,
        radio: '1',
        listk:"",
        month:"",
        url:"",
        func_J01:false,
        func_J02:false,

        weijiesuan:{

        },
        shop:""
			}
		},
		created() {
      var that = this

      this.url = window.location.origin+"/"

			this.getlist();
      //未结算
      axios.get('/api/plan-market/expend/logs?merchant_id='+this.$route.query.id + '&status=-1')
      	.then(response => {
      		if(response.data.msg.code == 0){
      			that.weijiesuan = response.data.data.data
            console.log(that.weijiesuan)
      		}else{
      			if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
      			that.$message.error(response.data.msg.info);
      		}
      	})

      //权限问题
      var user = JSON.parse(localStorage.getItem('USER'));
      this.user_func = user.functions
      for( var i in this.user_func){
          var func_number = this.user_func[i].code
          if(func_number.indexOf("J01") >= 0){ this.func_J01 = true }
          if(func_number.indexOf("J02") >= 0){ this.func_J02 = true }
      }

			//获取自己的id
			var user = JSON.parse(localStorage.getItem('USER'));
			this.id = user.id
      axios.get('/api/gth/user/shop')
          .then(response => {
              if(response.data.msg.code == 0){
                  this.shop_id = response.data.data.shop_id
              }else{
                  if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
                  that.$message.error(response.data.msg.info);
              }
          })
		},
		methods:{
            //下载模板
            down:function(e){
                const a = document.createElement('a');
                a.setAttribute('href', this.url+e);
                a.click();
            },
            shengcheng:function(){
                this.loading = true
                var that = this
                axios.post('/api/plan-market/expend/export',{merchant_id:this.weijiesuan.user_id,id:this.weijiesuan.tid})
                    .then(response => {
                        if(response.data.msg.code == 0){
                            that.$message.success("发起生成确认表成功，请稍后查看列表。");
                            that.getlist()
                        }else{
                            if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
                            that.$message.error(response.data.msg.info);
                        }
                    })
            },

			//翻页
			fanye:function(page){
				this.loading = true
				this.page = page
				this.getlist()
			},
			//跳转编辑佣金
			fixmoney:function(id){
				this.$router.push({
					path: '/editMoney',
					query: { id: id }
				})
			},
			//跳转查看订单
			seeorder:function(id){
				this.$router.push({
					path: '/order_question/orderOther',
					query: { id: id }
				})
			},
      seeshop:function(id){
				this.$router.push({
					path: '/myDistributorshop',
					query: { id: id }
				})
			},
			//获取
			getlist:function(){
        this.search = this.search.trim()
				var that = this;
				axios.get('/api/plan-market/expend/logs?merchant_id='+this.$route.query.id)
					.then(response => {
						if(response.data.msg.code == 0){
							
              for(var i = 0; i < response.data.data.data.length; i++){
                if(response.data.data.data[i].status == -1){response.data.data.data[i].status = "待生成"}
                if(response.data.data.data[i].status == 0){response.data.data.data[i].status = "待确认"}
                if(response.data.data.data[i].status == 1){response.data.data.data[i].status = "待结算"}
              }
              that.list = response.data.data.data
							that.total = response.data.data.total
							that.loading = false
              if( response.data.data.data != ''){
                that.shop = response.data.data.data[0].shop_name
              }

						}else{
							if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
							that.$message.error(response.data.msg.info);
						}
					})
        axios.get('/api/plan-market/expend/logs?merchant_id='+this.$route.query.id + '&status=-1')
        	.then(response => {
        		if(response.data.msg.code == 0){
              if( response.data.data.data != ''){
                that.weijiesuan = response.data.data.data[0]
              }

        		}else{
        			if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
        			that.$message.error(response.data.msg.info);
        		}
        	})
			},
      fixstatus:function(status,id){
        this.loading = true
        var that = this;
        axios.post('/api/plan-market/expend/confirm',{id:id,status:status})
        	.then(response => {
        		if(response.data.msg.code == 0){
              that.getlist()
        		}else{
        			if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
        			that.$message.error(response.data.msg.info);
        		}
        	})
      },

			//搜索
			searchgo:function(){
          this.page = 1
          this.loading = true
          this.getlist()
			}

		}

	}
</script>

<style lang="scss" scoped>
	.index{
    .listk{
      .el-radio{ margin:10px;}
    }
		
        .powertop{ display: flex; background:#f9f9f9; }
        .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #EBECEF solid; color: #727272; border-right: 1px #EAEAEA solid; font-size: 14px; text-align: center;}
        .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}
        .con{  background: #FFFFFF;
          .flex{ display: flex; background: #EAEAEA; margin:20px; padding: 20px;
            .flex2{ display: flex;
              .c1{ flex-basis: 180px; color: #666; line-height: 30px;}
              .c3{ display: flex; align-items: center;
                .el-button { height:36px;}
              }
            }
          }
        }

        .month{ text-align: right;  background: #FFFFFF; padding: 20px;}
				.title{border-bottom: 1px #EAEAEA solid;  line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272;}
				.add{ display: flex; justify-content: space-between; padding: 20px 30px; text-align: right; position: relative;
					.input-with-select{ width: 280px;}
					.el-button{  padding: 10px 20px;}
				}
        .el-input__icon{line-height: 36px;}
				.list{
					display: flex; text-align: center; color: #727272; line-height: 45px; margin: 0 20px; border: 1px #EAEAEA solid; margin-top: -1px;
					.th{ flex: 1; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
					.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid;
						.el-button{
							a{ color: #409EFF;}
							&:hover{
								a{ color: #FFF;}
							}
						}

					}
          .th1{ flex-basis: 50px; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
          .td1{ flex-basis: 50px;  font-size: 14px; border-right:1px #EAEAEA solid;  }

				}
				.el-pagination{ text-align: right; margin: 20px 0}
				.my{
					display: flex; justify-content: space-between; padding: 20px; line-height: 20px;
					.myid{
						font-size: 17px; color: #DD2727; padding-left: 10px;
						span{ color: #B1B1B1; font-size: 14px; margin-left: 20px}
					}
					.invitation{
						font-size: 14px; color: #B1B1B1;
						span{ color: #197CFF; cursor: pointer;}
					}
				}


	}
</style>